<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('Api调用日志列表')" />
    <style type="text/css">
        .layui-col-sm4 {width: 23%;}
    </style>
</head>
<body>
<div class="main-container" id="main-container">
    <div class="main-content">
        <form class="layui-form dis-ctr" >
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline layui-col-sm4">
                        <label class="layui-form-label">系统名称：</label>
                        <div class="layui-input-block">
                            <input id="systemName" type="text" name="systemName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-sm4">
                        <label class="layui-form-label">系统功能类型：</label>
                        <div class="layui-input-block">
                            <input id="typeName" type="text" name="typeName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-sm4">
                        <label class="layui-form-label">日志时间：</label>
                        <div class="layui-input-block">
                            <input style="display: none;" id="startTime" name="startTime">
                            <input style="display: none;" id="endTime" name="endTime">
                            <input id="time-kw" type="text" autocomplete="off" class="layui-input"><i class="fa fa-calendar icon_date_search"></i>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-sm4">
                        <a class="layui-btn layuiadmin-btn-order fa fa-search" id="btn-search"><span class="fa_span">查询</span></a>
                        <button type="reset" class="layui-btn layui-btn-primary fa fa-refresh" ><span class="fa_span">重置</span></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="mid-content">
        <table class="layui-hide" id="dhTable" lay-filter="ftable"></table>
    </div>
</div>
<script type="text/html" id="barDh">
    <a class="layui-btn layui-btn-xs dhicon dh-search layui-btn-warm" href="javascript:void(0)" onclick="$.operate.detail('{{d.id}}')" shiro:hasPermission="system:apilog:view"> 详细</a>
</script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    /*<![CDATA[*/
    var prefix = ctx + "system/apilog";
    /*]]>*/
</script>
<script type="text/javascript">
    var $,layer,form,table;
    layui.use(['laydate','table','form','layer','jquery'], function () {
        $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table,laydate = layui.laydate;
        $.tablelist.init({
            elem: '#dhTable'
            ,modalName: "Api调用日志"
            ,detailUrl: prefix + "/detail/{id}"
            ,url: prefix + "/list"
            ,initSort: {field: 'createTime',type: 'desc'}
            ,where: {
                field: 'createTime' //排序字段
                ,order: 'desc' //排序方式
            }
            ,cols: [[
                {field: 'id',title: '编号', sort: true, width:90},
                {field: 'system',title: '系统名称', sort: true, width:150},
                {field: 'type',title: '系统功能类型', sort: true, width:200},
                {field: 'code',title: '状态码',align: 'center', sort: true, width:80},
                {field: 'message',title: '状态提示', sort: true,templet:function(rec){ return ((rec.code == "0")  ? "成功":rec.message);}},
                {field: 'createTime',title: '创建时间', sort: true, width:180},
                {title: '操作',width:100,align: 'center',templet:'#barDh'}
            ]
            ]
            ,height:'full-' + ( $('.north').height()+70),
        });
        //时间控件
        laydate.render({
            elem: '#time-kw',
            type:'datetime',
            range: '~',
            done: function (value, date, endDate) {
                var hours = endDate.hours;
                var minutes = endDate.minutes;
                var seconds = endDate.seconds;
                if (hours == "0" && minutes == "0" && seconds == "0"){
                    $(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
                    // 改变结束时间默认值
                    $(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
                }
                var splitArray = value.split('~');
                var startTime = (splitArray.length > 0) ? splitArray[0] :"";
                var endTime  =  (splitArray.length > 1) ?  splitArray[1] :"";
                $('#startTime').val(startTime);
                $('#endTime').val(endTime);
            }
        });
        //监听排序事件
        table.on('sort(ftable)', function(obj){
            $.tablelist.sort('dhTable',obj);
        });
        var active = {
            reload: function (formData) {
                table.reload('dhTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where:{
                        system:$("#systemName").val(),
                        type:$("#typeName").val(),
                        startTime:$("#startTime").val(),
                        endTime:$("#endTime").val()
                    }
                });
            },
        };
        //搜索
        $('#btn-search').on('click', function () {
            active['reload'].call(this);
        });
    });
    //刷新
    function allReload(result){
        if(result.code==0){
            setTimeout(function(){
                layer.closeAll();
                table.reload('dhTable');
            }, 1000);
        }
    }
</script>
</body>
</html>